import React from 'react';
import {Layout, Modal} from 'antd';
import './index.less';
import {connect} from "dva";
import Curd from "components/Curd";
import DataTable from "components/Base/DataTable";
import Button from "components/Base/Button";
import Icon from "components/Base/Icon";
import BaseComponent from "components/Base/BaseComponent";
import BindedDevices from "./BindedDevices";

const {Content, Footer, Header} = Layout;

@connect(({patient}) => ({patient}))
export default class extends BaseComponent {

  state = {
    visible: false,
  }

  getNamespace() {
    return 'patient';
  }

  getTableColumns(self) {
    return [

      {
        title: '病人Id',
        name: 'id',
        tableItem: {},
        formItem: {
          type: 'hidden'
        },
      },
      {
        title: '姓名',
        name: 'name',
        tableItem: {},
        formItem: {
          rules: [
            {
              required: true,
              message: '请输入姓名'
            }
          ]
        },
      },
      {
        title: '性别',
        name: 'sex',
        tableItem: {
          filters: [
            {
              value: 'F',
              text: '男',
            },
            {
              value: 'M',
              text: '女',
            },
          ]
        },
        dict: [
          {code: 'F', codeName: '男'},
          {code: 'M', codeName: '女'},
        ],
        formItem: {
          type: 'select',
          rules: [
            {
              required: true,
              message: '请选择性别'
            }
          ]
        }
      },
      {
        title: '身份证',
        name: 'identity',
        tableItem: {},
        formItem: {type: 'date'}
      },

      {
        title: '病床号',
        name: 'bed_no',
        tableItem: {},
        formItem: {}
      },

      {
        title: '住院号',
        name: 'pat_id',
        tableItem: {},
        formItem: {}
      },

      {
        title: '设备',
        name: 'devices',
        tableItem: {
          render: (text, record) => {
            return (
              <DataTable.Oper>
                <a onClick={e => {
                  self.props.showBindDevices(record.id);
                }}>
                  <span>绑定4台设备</span>
                </a>
              </DataTable.Oper>
            );
          }
        },
        formItem: {
          type: 'hidden'
        }
      },

      {
        title: '操作',
        tableItem: {
          width: 180,
          render: (text, record) => (
            <DataTable.Oper>
              <Button tooltip="修改" onClick={e => self.onUpdate(record)}>
                <Icon type="edit"/>
              </Button>
              <Button tooltip="删除" onClick={e => self.onDelete(record)}>
                <Icon type="trash"/>
              </Button>
            </DataTable.Oper>
          )
        }
      }
    ]
      ;
  }

  getSearchColumns() {
    return [{
      title: '姓名',
      name: 'name',
      searchItem: {}
    }];
  }

  showBindDevices = (patientId) => {
    this.setState({visible: true, patientId});
  }

  handleCancel = () => {
    this.setState({visible: false});
  }

  render() {

    const {visible, patientId} = this.state;

    const curdProps = {
      ...this.props,
      namespace: 'patient',
      tableColumns: this.getTableColumns,
      searchColumns: this.getSearchColumns,
      showBindDevices: this.showBindDevices,
      disabledAdd: true,
    }

    return (
      <Layout>
        <Content>
          <Curd {...curdProps}/>
          <Modal
            title="绑定的设备列表"
            visible={visible}
            // onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={null}
          >
            <BindedDevices patientId={patientId}/>
          </Modal>
        </Content>
      </Layout>
    );
  }

}
